<template>
    <div class="login">
        <div class="logo">
            <img src="../assets/images/login.png" alt="">
        </div>
        <van-form>
            <van-field v-model="form.mobile" name="用户名" label="用户名" placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field v-model="form.sms_code" type="password" name="密码" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            <p class="box2">
                <span>找回密码</span>
                <span @click="$router.push('/smslogin')">注册/验证码登录</span>
            </p>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" @click="loginFn">登录</van-button>
            </div>
            <p class="three">第三方登录</p>
            <div class="foot">
                <div class="one">
                    <img src="../assets/images/pay-wx.png" alt="">
                    <span>微信登录</span>
                </div>
                <div class="one">
                    <img src="../assets/qq.png" alt="">
                    <span>QQ登录</span>
                </div>
            </div>
        </van-form>
    </div>
</template>
<script>
import {getCodeLogin} from "@/http/request"
export default {
    data() {
        return {
            form: {
                mobile: "",
                sms_code: "",
                sms_type: "login",
                type: 1,
                client: 1
            }
        }
    },
    methods: {
        async loginFn(){
           let res = await getCodeLogin(this.form)
           console.log(res);
        }
    }
}
</script>
<style lang="scss" scoped>
.login {
    .logo {
        width: 100vw;
        height: 200px;
        text-align: center;

        img {
            width: 262px;
            height: 55px;
            margin: 50px 0;
        }
    }

    .box2 {
        margin: 5px 30px;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            color: #999;
        }
    }
    .three{
        color: #000;
        text-align: center;
        margin: 20px 0;
        font-size: 14px;
    }
    .foot{
        display: flex;
        padding: 0 30px;
        .one{
            display: flex;
            align-items: center;
            justify-content: space-between;
           img{
            width: 30px;
            height: 30px;
            margin: 0 30px;
           }
        }

    }
}
</style>


